<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./stylesheets/bootstrap.css">
    <link rel="stylesheet" href="./stylesheets/lbwxq.css">
    <link rel="stylesheet" href="./stylesheets/lyjNav.css">
    <link rel="stylesheet" href="./stylesheets/swiper.min.css">
    <link href="http:////at.alicdn.com/t/font_1512981_qy3wz899e7.css" rel="stylesheet">
    <link rel="stylesheet" href="./stylesheets/reset.css">
    <title>礼拜五详情</title>
</head>
<style>
    html,
    body {
        position: relative;
        width: 100%;
    }
    #js-xx {
        overflow: hidden;
    }
    #lxcfooter {
        /* position: absolute; */
        width: 100%;
        overflow: hidden;
        /* bottom: -1800px; */
    }
    </style>
<body>
    <div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content"></div>
        </div>
    </div>
    <!-- 头部 -->
    <div id="lxcbox">
        <div id="lxcheader"></div>
        <div id="lxcsearch"></div>
    </div>
    <div class="navwrap clear">
        <div id="nav"></div>
        <div class="tradecate"></div>
    </div>
    <div id="top-bar">
        <ul class="breadcrumb">
            <li>您当前的位置:</li>
            <li><a href="#">全部商品</a></li>
            <li><a href="#">苹果</a></li>
            <li class="active">阿克苏</li>
        </ul>
    </div>
    <div class="xinxi">
        <div class="pingguo">
            <!-- <img src="./images/pingguo.jpg" alt=""> -->
        </div>
        <div class="pg-xx">
            <div class="h4">
                <!-- <h4>新疆哈密瓜1500kg</h4> -->
                <span id="qg">全国</span>
                <span id="lbw">礼拜五</span>
                <span id="cr">次日达</span>
                <span id="zy">自营</span>

            </div>

            <div class="xx-mid">
                <div class="xx-first">
                    <img src="./images/pg-xx.png" alt="">
                    <div class="xx-zsmj">
                        <p>资深买家</p>
                    </div>
                </div>

                <div class="xx-js">
                    <p>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在清宫剧中雍正出现的次数虽然没有乾隆爷那么多，但是也是不少的。关于雍正的爱恨情仇我们都比较熟悉了，但是对于了。雍正一生勤勉，可以说为了这。
                    </p>
                </div>

            </div>
            <div class="xx-three">
                <div class="xx-three-one">
                    <span class="price">现价：￥<strong id="price">20.0</strong></span>
                    <span>原价：￥40.00</span>
                </div>
                <div class="xx-three-two">
                    <span>请选择规格</span>
                    <span class="five"><strong class="Number" >500</strong>g </span>
                    <span class="five"><strong class="Number">1000</strong>g</span>
                    <span class="five"><strong class="Number">1000</strong>g</span>
                </div>
                <div class="xx-three-three">
                    <span>请选择规格</span>
                    <span class="five"><strong class="Number">5000</strong>g</span>
                    <span class="five"><strong class="Number">1000</strong>g</span>
                </div>
                <div class="xx-three-four">
                    <span>数量</span>
                    <div class="input-one">
                        <input id="jian" type="button" name="" value="-">
                        <input id="jia" type="button" name="" value="+">
                        <strong class="num">1</strong>
                    </div>
                    <input id="ipt1" type="button" value="立即购买">
                    <input id="ipt2" type="button"
                    value="加购物车">
                </div>
            </div>
        </div>
    </div>
    <div class="xx-bottom">
        <div class="xx-bottom-one">
            <img src="./images/left.png" alt="">
            <img src="./images/xxxc.png" alt="">
            <img src="./images/xxxc.png" alt="">
            <img src="./images/xxxc.png" alt="">
            <img src="./images/xxxc.png" alt="">
            <img src="./images/right.png" alt="">
        </div>
        <div class="xx-bottom-two">
            <a href=""><img src="./images/wujiaoxing1.png" alt=""></a>
            <a href=""><img src="./images/wujiaoxing2.png" alt=""></a>
            <span>收藏此商品</span>
            <span>分享到：</span>
            <a href="error"><img src="./images/kongjian.png" alt=""></a>
            <a href="error"><img src="./images/kongjian.png" alt=""></a>
            <a href="error"><img src="./images/kongjian.png" alt=""></a>
            <a href="error"><img src="./images/kongjian.png" alt=""></a>
        </div>
    </div>


    </div>
    <div id="js-xx">
        <div class="js-top">
            <ul class="nav nav-tabs">
                <li id="spxq" class="active">商品详情</li>
                <li id="sppj">商品评价</li>
            </ul>
        </div>
            <div class="mida">
                <!-- <div class="js-mid">
                    <span>男士短衬衫</span>
                    <p>明水礼盒是十分优秀的，送亲人，送朋友，都是不二人选</p>
                    <p>明水礼盒是十分优秀的，送亲人，送朋友，都是不二人选,做这个页面的人真帅，明水礼盒是十分优秀的，送亲人，送朋友，都不二人选，业精于勤，荒于稀，业精于勤荒于稀</p>
                    <p>明水礼盒是十分优秀的，送亲人，如果需要把标签改成胶囊的样式，只需要使用送朋友，都是不二人选,做这个页面的人真帅，明水礼盒是十分优秀的，送亲人，送朋友，都不二人选</p>
                    <img src="./images/hamigua.jpg" alt="">
                </div> -->
                <div class="js-mid">
                   
                </div>
            </div>
        <div class="jsBoma">
            <div id="js-bottom">
                <ul class="nav nav-tabs navPlus">
                    <li><a href="#">商品详情</a></li>
                    <li class="active"><a href="#">商品评价</a></li>
                </ul>
                <div id="jsp">
                    <div class="js-pj">
                        <div class="js-pj-left">
                            <img src="./images/touxiang.png" alt="">
                        </div>
                        <div class="js-pj-right">
                            <!-- <div class="xing">
                                <img src="./images/wujiaoxing1.png" alt="">
                                <img src="./images/wujiaoxing1.png" alt="">
                                <img src="./images/wujiaoxing1.png" alt="">
                                <img src="./images/wujiaoxing1.png" alt="">
                                <img src="./images/wujiaoxing2.png" alt="">
                                <p>帮同事买的，很不错，性价比高</p>
                            </div>
                            <div id="js-tx">
                                <img src="./images/touxiang2.png" alt="">
                                <img src="./images/touxiang2.png" alt="">
                                <img src="./images/touxiang2.png" alt="">
                                <img src="./images/touxiang2.png" alt="">
                            </div> -->
                        </div>
                    </div>
                </div>

            </div>
        </div>
        
    </div>
    <!-- 尾部 -->
    <div id="lxcfooter">
        <div id="lxcfooter1"></div>
        <div id="lxcfooter2"></div>
        <div id="lxcbottom"></div>
    </div>
</body>

</html>
<script src="./javascripts/jquery-3.4.1.min.js"></script>
<script src="./javascripts/bootstrap.min.js"></script>
<script src="./javascripts/lxcheader.js"></script>
<script src="./javascripts/lyjNav.js"></script>
<script>
    $('#jia').on("click",function(){
        
        let num = $('.num').html();
        num++;
        $('.num').html(num);
        
    })
     $('#jian').on("click", function () {
            let num = $(".num").html();
            num--;
            if(num<1){
                num = 1;
            }
            $(".num").html(num);
        })
   

     $('#sppj').on('click',function(){
            $(".navPlus").hide();
            $('.mida').hide();
            $('.jsBoma').show();
       
     })  
   
        $('#spxq').on('click', function () {
                $('.jsBoma').hide();
                $('.mida').show();
           
        })
        
        $(".five").each(function () {
                $(this).click(function () {
                     $(".five").css('border', '1px solid #e2e2e2');
                    $(".five").onoff = false;
                    this.onoff = true;
                    if (this.onoff) {
                        $(this).css('border', '1px solid red');
                        this.onoff = false;
                    } else {
                        $(this).css('border', '1px solid #e2e2e2');
                        this.onoff = true;
                    }
                })
            })

        //加入购物车
        
            //  $('#ipt2').click(function () {
            //     location.href = "pay";
            // })
            $('#ipt1').click(function () {
                location.href = "lxcshangjiabupeisong";
            })
            
    $.ajax({
        url:'http://localhost:8080/lbwxq/pl',
        type:'post',
        data:{
            id:'1',
            sp_id:'1',
            goods_id:'3',
            goods_name:'橙子1',
            goods_id: localStorage.getItem('goodID')
        },
        success:(data)=>{
            // console.log(data);
            $("#jsp").empty();
            $('.js-mid').empty();
            $('.pingguo').empty();
            // $('.h4').empty();
            if(data.code == '1') {
                for (let i in data.result){
                    $("#jsp").append('<div class="js-pj"><div class="js-pj-left"><img src="'+ data.result[i].pic +'" alt=""></div><div class="js-pj-right"><div class="xing"><img src="./images/wujiaoxing1.png" alt=""><img src="./images/wujiaoxing1.png" alt=""><img src="./images/wujiaoxing1.png" alt=""><img src="./images/wujiaoxing1.png" alt=""><img src="./images/wujiaoxing2.png" alt=""><p>'+ data.result[i].com +'</p></div><div id="js-tx"><img src="'+ data.result[i].comPic1 +'" alt=""><img src="'+ data.result[i].comPic2 +'" alt=""><img src="'+ data.result[i].comPic3 +'" alt=""><img src="'+ data.result[i].comPic4 +'" alt=""></div></div></div>');
                }
                for (let k in data.res) {
                    $('.js-mid').append('<span>'+ data.res[k].sp_name +'</span><p>'+ data.res[k].sp_js +'</p><img src="'+ data.res[k].sp_img +'" alt="">');
                }
                for(let j in data.resu){
                    $('.pingguo').append(' <img src="'+ data.resu[j].goods_image +'" alt="">')
                }
                for(let i in data.resul){
                       $('.h4').append('<h4>'+ data.resul[i].goods_name +'</h4>') 
                }
            }
        },error:(xhr,err)=>{
            console.error(error)
        }
    })
    


    // 商品详情Ajax
    $('#ipt2').click(function () {
        // $('#myModal').modal({
        //     remote: "/pay"
        // });
        alert("成功加入购物车");
        // console.log($('h4').html(), $('.num').html(), $('.five').html(), $('.price').html())
            $.ajax({
            url: 'http://localhost:8080/lbwxq/zk',
            type: 'post',
            data: {
                id: localStorage.getItem('userID'),
                goods_id: localStorage.getItem('goodID'),
                car_img: './images/lyjimg/friday2.png',
                car_name: $('h4').html(),
                car_num: $('.num').html(),
                car_zl: $('.Number').html(),
                car_price: $('#price').html(),
            },
            dataType: 'json',
            success: (data) => {
                console.log(data);
            },
            error: (xhr, err) => {
                console.error(err);
            }
        })
        })
    






</script>








